<template>
  <div class="empty-state">
    <div class="empty-icon">
      <van-icon :name="icon" size="64" color="#dcdfe6" />
    </div>
    <div class="empty-title">{{ title }}</div>
    <div class="empty-description">{{ description }}</div>
    <div v-if="buttonText" class="empty-action">
      <van-button type="primary" size="small" @click="$emit('button-click')">
        {{ buttonText }}
      </van-button>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  icon: {
    type: String,
    default: 'goods-collect-o'
  },
  title: {
    type: String,
    default: '暂无数据'
  },
  description: {
    type: String,
    default: '暂无相关内容'
  },
  buttonText: {
    type: String,
    default: ''
  }
});

// 定义事件
const emit = defineEmits(['button-click']);
</script>

<style scoped>
.empty-state {
  text-align: center;
  padding: 40px 20px;
  background-color: white;
  border-radius: 12px;
}

.empty-icon {
  margin-bottom: 20px;
}

.empty-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
}

.empty-description {
  font-size: 14px;
  color: #999;
  margin-bottom: 24px;
  line-height: 1.5;
}

.empty-action .van-button {
  min-width: 120px;
}
</style>